<template>
    <div class="show-pc">
        <div class="img_Card">
            <div class="sort">
                <div v-for="(card, index) in cardList" :key="card.title">

                    <div class="title_box">
                        <div>
                            <img :src="card.type" alt="" class="object-contain" />
                        </div>
                        <div class="card_title">{{ card.title }}</div>
                    </div>

                    <div @click="handleToDetail(card, index)">
                        <sshbImageGroup :width="354" :height="354" :src="card.smallImages" key-val="src"
                            style="border-radius: 6px;">
                        </sshbImageGroup>
                    </div>


                </div>

            </div>
        </div>
    </div>
    <div class="show-wap">
        <div class="img_Card-wap">
            <div class="sort-wap">
                <div v-for="(card, index) in cardList" :key="card.title" class="sort-item-wap">


                    <div class="title_box-wap">
                        <div>
                            <img :src="card.type" alt="" class="object-contain-wap" />
                        </div>
                        <div class="card_title-wap">{{ card.title }}</div>
                    </div>
                    <div @click="handleToDetail(card, index)">
                        <sshbImageGroup :width="860" :height="630" :src="card.smallImages" key-val="src"
                            style="border-radius: 6px;">
                        </sshbImageGroup>
                    </div>

                </div>

            </div>
        </div>
    </div>



</template>

<script setup>
import { ref } from 'vue'
import sshbImageGroup from '@/sshbComponents/sshbImage/sshbImageGroup.vue';
import { useStore } from '@/store'
import { useHttp } from '@/api/http'


const { themeStore } = useStore()
const searchPosition = ref()
const router = useRouter()
const hoverStates = ref([]);
const props = defineProps({
    icon: String,
    title: String,
    mainImage: String,
    smallImages: Array
})
const cardList = ref([]);

watch(() => {
    searchPosition.value = themeStore.searcShow.visible
})




// 初始化 hover 状态
hoverStates.value = new Array(cardList.value.length).fill(false);



const handleToDetail = (item, index) => {

    Object.assign(themeStore.searcShow, {
        visible: searchPosition.value,
        txet: item.title, //这是搜索框文字
        title: item.title,
        columnId: item.id,
        activeKey:index += 1
    });
    themeStore.activeKey = index += 1;
    
    if (item.title === "AI生图") {
        router.push('/AImap');
    } else {
        router.push({
            path: `/standardPath/`,
             query: {
                    ...themeStore.searcShow,
                }
        });
    }


}

// 获取列表数据
// const getPicFirstColumnList = () => {
//     useHttp.get('/web/index/picFirstColumnList').then((res) => {
//         console.log("详情数据",res.result);
        

//         if (!Array.isArray(res.result)) {
//             console.error('接口返回的 result 不是数组');
//             return;
//         }

//         const formattedList = res.result.map(item => {
//             // 获取 mainImage（第一个 list 的 imageList 第一张图）
//             const firstImage = item.list?.[0]?.imageList?.[0]?.imgPath || '';

//             // 构造 smallImages 数组
//             const smallImages = (item.list || []).map(listItem => ({
//                 src: listItem.imageList?.[0]?.imgPath || ''
//             }));

//             return {
//                 id: item.columnId,
//                 type: item.columnIcon,     // columnIcon → type
//                 title: item.columnName,    // columnName → title
//                 mainImage: firstImage,     // 第一张图作为 mainImage
//                 smallImages: smallImages,   // 所有图片放入 smallImages

//             };
//         });



//         // 更新响应式数据
//         cardList.value = formattedList;


//     }).catch(error => {
//         console.error("获取首列图片列表失败:", error);
//     });
// };

const getPicFirstColumnList = () => {
    useHttp.get('/web/index/picFirstColumnList').then((res) => {

        if (!Array.isArray(res.result)) {
            return;
        }

        const formattedList = res.result.map(item => {
            // 1. 处理 columnPic（将逗号分隔的字符串转为数组，并过滤空值）
            const columnPicArray = item.columnPic 
                ? item.columnPic.split(',').filter(url => url.trim())
                : [];

            // 2. 获取 mainImage（优先取 columnPic 的第一张图，没有则取 list 的第一张图）
            const mainImage = columnPicArray[0] 
                || item.list?.[0]?.imageList?.[0]?.imgPath 
                || '';

            // 3. 构造 smallImages 数组（合并 columnPic 和 list 中的图片）
            const smallImages = [
                // 添加 columnPic 的所有图片（已转为数组）
                ...columnPicArray.map(src => ({ src })),
                
                // 添加 list 中的图片（原逻辑）
                ...(item.list || []).map(listItem => ({
                    src: listItem.imageList?.[0]?.imgPath || ''
                }))
            ].filter(img => img.src); // 过滤空src

            return {
                id: item.columnId,
                type: item.columnIcon,
                title: item.columnName,
                mainImage,          // 优先展示 columnPic 的第一张图
                smallImages,       // 合并后的图片数组
                rawData: item       // 保留原始数据（调试用，可选）
            };
        });


        cardList.value = formattedList;
        
    }).catch(error => {
        console.error("获取首列图片列表失败:", error);
    });
};










// 调用方法获取数据
getPicFirstColumnList();


</script>
<style lang="less" scoped>
.img_Card {
    width: 95.83333333333334vw;
    margin: 0 auto;




    .sort {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8vw;

        .title_box {
            margin-top: 3.12vw;
            margin-bottom: 1.40vw;
            display: flex;
            align-items: center;
            gap: 0.67vw;
            cursor: pointer;

            .object-contain {
                width: 1.14vw;
                height: 0.98vw;

                cursor: pointer;

            }

            .card_title {
                font-size: 0.83vw;
                color: #999999;
                cursor: pointer;

            }
        }
    }



}

.img_Card-wap {
    width: 95%;
    height: auto;
    margin: 0 auto;





    .sort-wap {
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;



        .sort-item-wap:last-child {
            margin-top: auto;
            padding-bottom: 100px;
        }

        .sort-item-wap {
            width: 48%;

        }

        .title_box-wap {
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 13px;

            .card_title-wap {
                font-size: var(--text-16px);
                color: #999999;

            }

            .object-contain-wap {
                width: 20px;
                height: 20px;
                font-weight: 500;
            }
        }


    }





}
</style>
